<template>
  <div class="page gray-page">
    <nav-bar :title="title"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-sticky class="page-scroll" :offset-top="44">
        <van-form
          validate-trigger="onSubmit"
          :show-error="false"
          ref="from"
          :label-width="200"
          @failed="onFailed"
          @submit="onSubmit"
        >
          <van-field readonly :label="label" size="large" :border="false" />
          <van-field readonly label="上报事件数" required :border="false" />
          <van-field
            type="digit"
            name="reportEventNum"
            v-model="formParams.reportEventNum"
            placeholder="请输入"
            :rules="rules.reportEventNum"
          >
            <template v-slot:right-icon>
              <span>件</span>
            </template>
          </van-field>
          <van-field readonly label="办结事件数" required :border="false" />
          <van-field
            type="digit"
            name="finishEventNum"
            v-model="formParams.finishEventNum"
            placeholder="请输入"
            :rules="rules.finishEventNum"
          >
            <template v-slot:right-icon>
              <span>件</span>
            </template>
          </van-field>
          <van-field readonly label="基础信息审核数" label-width="120px" required :border="false" />
          <van-field
            type="digit"
            name="biApproveNum"
            v-model="formParams.biApproveNum"
            placeholder="请输入"
            :rules="rules.biApproveNum"
          >
            <template v-slot:right-icon>
              <span>件</span>
            </template>
          </van-field>
          <van-field readonly label="基础信息采集数" label-width="120px" required :border="false" />
          <van-field
            type="digit"
            name="biSubmitNum"
            v-model="formParams.biSubmitNum"
            placeholder="请输入"
            :rules="rules.biSubmitNum"
            :border="false"
          >
            <template v-slot:right-icon>
              <span>件</span>
            </template>
          </van-field>
          <div class="log-search">
            <van-search
              v-model="eventName"
              placeholder="请输入需要搜索的事件标题"
              :left-icon="searchLeftIcon"
              clearable
              @input="getEventList"
            />
            <transition name="van-slide-down">
              <gb-card shadow class="log-search-result" v-show="eventName && eventList">
                <ul>
                  <li v-for="(value, key) in eventList" :key="key" @click="handleSelectEventName(value)">
                    {{ value }}
                  </li>
                </ul>
              </gb-card>
            </transition>
            <van-field
              class="van-field__value--textarea"
              name="logContent"
              v-model="formParams.logContent"
              rows="12"
              autosize
              type="textarea"
              maxlength="500"
              placeholder="请详细描述工作内容"
              show-word-limit
              :border="false"
              :rules="rules.logContent"
            />
          </div>
          <div style="padding: 60px 16px">
            <template v-if="this.$route.query.logCode && this.$route.query.logCode !== 'null'">
              <van-row :gutter="23">
                <van-col span="12">
                  <van-button block native-type="button" @click="$router.go(-1)">取消</van-button>
                </van-col>
                <van-col span="12">
                  <van-button block type="info" native-type="submit" :disabled="buttonDisabled">保存</van-button>
                </van-col>
              </van-row>
            </template>
            <template v-else>
              <van-row :gutter="23">
                <van-col span="12">
                  <van-button block native-type="button" @click="onClear">清空</van-button>
                </van-col>
                <van-col span="12">
                  <van-button block type="info" native-type="submit" :disabled="buttonDisabled">提交</van-button>
                </van-col>
              </van-row>
            </template>
          </div>
        </van-form>
      </van-sticky>
    </div>
  </div>
</template>
<script>
import Routine from '@/api/routine'
import { FormParams } from './libs/data'
import { formatTimes } from '@/libs/tool'
export default {
  data() {
    return {
      searchLeftIcon: require('@/assets/images/basic/searchbar_search@2x.png'),

      title: '今日日志',
      label: '今日工作内容',
      eventName: '',
      eventList: [],
      eventSearchTimer: null,
      buttonDisabled: false,
      formParams: new FormParams(),
      rules: {
        reportEventNum: [{ required: true, message: '请输入上报事件数' }],
        finishEventNum: [{ required: true, message: '请输入办结事件数' }],
        biApproveNum: [{ required: true, message: '请输入基础信息审核数' }],
        biSubmitNum: [{ required: true, message: '请输入基础信息采集数' }],
        logContent: [
          { required: true, message: '请输入工作内容' },
          {
            validator: val => {
              return val.length >= 10
            },
            message: '工作内容不得少于10个字'
          }
        ]
      }
    }
  },
  created() {
    if (this.$route.query.logCode && this.$route.query.logCode !== 'null') {
      this.getDetail()
    }
    if (this.$route.query.logDate) {
      this.formParams.logDate = this.$route.query.logDate
      const date = formatTimes.formatDateCN(new Date(this.formParams.logDate))
      const week = formatTimes.formatWeek(new Date(this.formParams.logDate))
      this.title = '工作日志'
      this.label = date + ' ' + week
    } else {
      this.formParams.logDate = formatTimes.formatDate(new Date())
    }
  },
  methods: {
    // 获取详情
    getDetail() {
      Routine.Log.detail({
        logCode: this.$route.query.logCode
      }).then(res => {
        const { status } = res.data
        if (status === 0) {
          this.formParams = res.data.data
        }
      })
    },
    // 搜索事件标题
    getEventList() {
      if (!this.eventName) return false
      const getEventList = () => {
        Routine.Log.event({
          eventName: this.eventName
        }).then(res => {
          const { status } = res.data
          if (status === 0) {
            this.eventList = res.data.data
          }
        })
      }
      if (this.eventSearchTimer) {
        clearTimeout(this.eventSearchTimer)
        this.eventSearchTimer = null
      }
      this.eventSearchTimer = setTimeout(() => {
        getEventList()
      }, 500)
    },
    // 事件标题选中
    handleSelectEventName(eventName) {
      this.formParams.logContent += eventName
      this.eventName = ''
      this.eventList = []
    },
    // 校验失败
    onFailed(errorInfo) {
      this.$refs.from.scrollToField(errorInfo.errors[0].name)
    },
    // 提交
    onSubmit() {
      const onSubmit = title => {
        this.buttonDisabled = true
        Routine.Log.save(this.formParams)
          .then(res => {
            const { status } = res.data
            if (status === 0) {
              this.$router.push(`/page/message?backTo=-2&title=${title}`)
            } else {
              this.$toast.fail(res.data.message)
            }
            this.buttonDisabled = false
          })
          .catch(() => {
            this.buttonDisabled = false
          })
      }
      if (this.$route.query.logCode && this.$route.query.logCode !== 'null') {
        this.$dialog
          .confirm({
            title: '提示',
            message: '是否修改日志内容',
            confirmButtonText: '是',
            cancelButtonText: '否'
          })
          .then(() => {
            onSubmit('日志修改成功')
          })
          .catch(() => {
            this.$router.go(-1)
          })
      } else {
        onSubmit('日志提交成功')
      }
    },
    onClear() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否清空所有内容',
          confirmButtonText: '是',
          cancelButtonText: '否'
        })
        .then(() => {
          this.formParams = new FormParams()
        })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/routine/log/report.less';
</style>
